<template>
    <div class="max" :style="max" id="welcome">

        <el-radio-group v-model="direction">

        </el-radio-group>
        <el-button @click="handleShow" type="primary" class="log-btn" :style="logregbtn"></el-button>
        <el-drawer
                style="background-color: rgba(255 , 255, 235, 0.3);"
                :visible.sync="drawer"
                :direction="direction"
                :before-close="handleClose"
                >
            <router-view></router-view>
        </el-drawer>
        <div class="bzh">
            <span>反馈邮箱：1263375216@qq.com</span>
            <br>
            备案/许可证编号：<a href="http://beian.miit.gov.cn/" style="text-decoration: none">桂ICP备2021004479号</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "welcome",
        data() {
            return {
                drawer: false,
                direction: 'rtl',
                user: {},
                max: {
                    backgroundImage: "url(" + require("../../src/image/Background-6.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                logregbtn: {
                    backgroundImage: "url(" + require("../../src/image/log-reg-btn.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                }
            }
        },
        methods:{
            /**
             * 显示登录框
             */
            handleShow() {
                this.drawer = true;
                this.$router.push('/login');
            },
            /**
             * 关闭登录框
             */
            handleClose(){
                this.drawer = false;
                this.$router.push('/welcome');
            }
        }
    }
</script>

<style lang="scss">
#welcome {
  height: 100%;

  /*.el-drawer.ltr, .el-drawer.rtl, .el-drawer__container{*/
  /*    height: 50%;*/
  /*}*/
  #el-drawer__title {
    font-size: 20px;
  }

  .el-form-item__label {
    color: #686565 !important;
  }

  .el-drawer__header {
    margin-bottom: 0;
    padding: 10px 0;
  }

  .log-btn {
    background-color: transparent;
    border: none;
  }

  .log-btn:focus, .log-btn:hover {
    background-color: transparent;
    border: none;
  }

  .log-btn {
    width: 30%;
    height: 10%;
    position: absolute;
    top: 65%;
    right: 7%;
  }


  .el-drawer.rtl, .el-drawer.rtl, {
    width: 90%;
    height: 66%;
    top: 19%;
    right: 8%;
    box-shadow: 0 0 60px #6c6969;
    border-radius: 10px;
  }


  .bzh {
    width: 330px;
    height: 30px;
    text-decoration: none;
    text-align: center;
    position: absolute;
    bottom: 2%;
    right: 40%;
  }

  .max {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .log-button {
    width: 150px;
    height: 50px;
    font-size: 20px;
    margin-left: 30px;
  }



}
</style>